<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>初始vue</title>
  <style>
  </style>
</head>
<body>
  <div id="app">
    <input type="text" v-model="message">
    <h2>{{message}}</h2>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const vm=new Vue({
      el:"#app",
      data: {
        message:'hello world',
      },
    });

    // vue的双向绑定主要实现原理
    // 数据劫持+发布订阅
    // 数据劫持主要通过Object.defineProperty()实现
    //发布-订阅模式又叫观察者模式，它定义对象间的一种一对多的依赖关系，当一个对象的状态改变时，所有依赖于它的对象都将得到通知。

    // Object.defineProperty()简单应用
    const obj ={
      name:'chen'
    }
    let age=18;
    Object.defineProperty(obj,'age',{
      get(){
        console.log('age被访问了')
        return age;
      },
      set(newValue){
        console.log('age被修改了')
        age = newValue;
      }
    })

    // mvvm  关键在于vm 保持数据和视图的同步, 数据改变更新视图;视图变化了,更新数据;
    //所以转化问题,就在于如何监听数据变化,如何监听视图;
    //监听视图很简单,无非利用事件监听;监听变量变化就要用到上面说的Object.defineProperty()方法
    //          监听                        触发set
    // 数据变化----->Object.defineProperty()------->触发更新视图方法
    



  </script>
</body>
</html>